<template>
	<el-row type="flex" justify="center">
		<el-col :span="2"></el-col>
		<el-col :span="9">
			<el-row type="flex" justify="center" align="middle">
				<body-pix :cardStyle="config" @change-img="changeImg"></body-pix>
			</el-row>
		</el-col>
		<el-col :span="3"></el-col>
		<el-col :span="8">
			<el-row type="flex" justify="center" align="middle">
				<div class="pick-list">
					<div v-for="item in list" :key="item" @click="imgClick(item)">
						<img :src="item" />
					</div>
				</div>
			</el-row>
		</el-col>
		<el-col :span="2"></el-col>
	</el-row>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import bodyPix from "./bodypix.vue";
const originImg = ref(window.$assets.pixDemo);
const list = computed(() => [originImg.value, ...window.$assets.list()]);
const config = reactive({
	$img: window.$assets.pixDemo,
	backgroundSize: "100% 100%",
	backgroundImage: `url('${window.$assets.path(0)}')`,
});

function imgClick(src: string) {
	config.$img = window.$assets.pixDemo;
	config.backgroundImage = `url('${src}')`;
}

function changeImg(params: string) {
	originImg.value = params;
}
</script>

<style scoped lang="less">
.el-row {
	height: 110%;
}
.el-card {
	display: flex;
	justify-content: center;
	width: 342px;
	height: 600px;
	border-radius: 35px;
	img {
		width: 100%;
		height: 100%;
	}
}

.pick-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin: 80px 0px;
	padding: 15px;
	border-radius: 35px;
	transform: translateX(-80px);
	justify-content: center;
	background: lightgrey;
	box-shadow: darkgrey 1px 1px 3px 1px;
	div {
		width: 75px;
		height: 75px;
		margin: 10px;
		cursor: pointer;
		user-select: none;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			box-shadow: darkgrey 1px 1px 3px 1px;
		}
	}
}
</style>
